<!DOCTYPE html>
<html lang="en">
<head>
    <title>五灵霸武DKP拍卖系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="/webjars/jquery-ui/1.12.1/jquery-ui.min.css">
    <link href="webjars/layui/2.5.5/css/modules/layer/default/layer.css" rel="stylesheet">
    <!-- 引入组件库 -->
    <script type="application/javascript" src="webjars/vue/2.6.11/vue.js "></script>
    <script type="application/javascript" src="webjars/jquery/3.4.1/jquery.js "></script>
    <script type="application/javascript" src="webjars/jquery-ui/1.12.1/jquery-ui.min.js"></script>
    <script type="application/javascript" src="webjars/layui/2.5.5/lay/modules/layer.js "></script>
    <link rel="stylesheet" href="/asset/css/auction.css">
</head>
<body>
<div id="container">
    <div id="main_platter">
        <div id="main_top_part">
            <div>
                <ul id="announcement">
                    <li v-for="msg in msgs">
                        <span v-if="msg.type==='join'">{{msg.user}}&nbsp;&nbsp;加入了团队</span>
                        <span v-else-if="msg.type==='sell'" style="color: yellow">开始拍卖&nbsp;&nbsp;<span
                                style="color: red">{{msg.item}}</span></span>
                        <span v-else-if="msg.type==='buy'" style="color: dodgerblue">{{msg.user}}&nbsp;&nbsp;出分了</span>
                        <span v-else-if="msg.type==='end'" style="color: yellow">拍卖结束&nbsp;&nbsp;<span
                                style="color: red">{{msg.item}}</span></span>
                        <span v-else-if="msg.type==='score'"
                              style="color: dodgerblue">{{msg.user}}&nbsp;&nbsp;出了{{msg.score}}分</span>
                        <span v-else-if="msg.type==='win'"><span
                                style="color: dodgerblue">{{msg.winner}}</span>&nbsp;&nbsp;以
                        <span style="color: yellow">{{msg.max}}</span>分获得了<span
                                    style="color: red">{{msg.item}}</span></span>
                        <span v-else>{{msg}}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div id="sub_platter">
        <div id="sub_title">
            <div>
                <img src="/asset/img/guild.png" id="brand" alt="公会名牌">
                <img src="/asset/img/toggle.png" id="toggle" alt="倒三角">
                <div id="member_count"><span>&nbsp;&nbsp;{{users.length}}/40</span></div>
            </div>
            <div id="split_line">
                <hr/>
            </div>
        </div>
        <div id="sub_list">
            <ul id="user_list">
                <li v-for="user in users">{{user.name}}</li>
            </ul>
        </div>
    </div>
    <div id="main_buttom_part">
        <div v-if="admin">
            <input id="item" class="input_box" placeholder="请输入装备名称">
            <div class="button_group">
                <input type="image" src="/asset/img/start_01.png" id="start_auction" v-on:click="sendsell(item)"
                       onmouseover="start_auction(this)"
                       onmouseout="start_auction(this)"/>
                <input type="image" src="/asset/img/end_01.png" id="end_auction" v-on:click="end"
                       onmouseover="end_auction(this)"
                       onmouseout="end_auction(this)"/>
            </div>
        </div>
        <input type="number" class="input_box" v-model="dkp" placeholder="请输入分数" minlength="1" maxlength="3">
        <div class="input_group">
            <input type="image" src="/asset/img/call_01.png" id="call" v-on:click="sendbuy(dkp)"
                   onmouseover="call(this)"
                   onmouseout="call(this)"/>
        </div>
    </div>
</div>
<script src="/asset/js/helper.js"></script>
<script>
    var dkp = new Vue({
        el: '#container',
        data: {
            name: '',
            login: true,
            admin: false,
            team: '',
            teams: [{"name": "请选择"}],
            users: [{"value": "比利比利"}, {"value": "小水马"}, {"value": "撒哈拉的企鹅"}, {"value": "身高两米五"}, {"value": "平八郎"}, {"value": "艾萨克丶李"}, {"value": "坐忘客"}, {"value": "广寒咕咕"}, {"value": "黑兔"}, {"value": "摩根雷德"}, {"value": "Duvet"}, {"value": "二哲"}, {"value": "剃刀者"}, {"value": "友人"}, {"value": "身高两米八"}, {"value": "从小就很拽"}, {"value": "Kallen"}, {"value": "继雨"}, {"value": "野性之傲"}, {"value": "山珍海味"}, {"value": "阿昆达"}, {"value": "撒哈拉灰熊"}, {"value": "我很快"}, {"value": "药丸要完"}, {"value": "还是大漂亮"}, {"value": "玖耀"}, {"value": "背火锅我来"}, {"value": "挣脱一切"}, {"value": "超越世界"}, {"value": "御风者"}, {"value": "蝶恋之舞"}, {"value": "Windkid"}, {"value": "我丑我骄傲"}, {"value": "我叫枫叶的哟"}, {"value": "莉莉埃姆"}, {"value": "基诺不"}, {"value": "花月邪魔"}, {"value": "床底的阿昆达"}, {"value": "破碎"}, {"value": "格林丨兔子"}, {"value": "寻梦的虫"}],
            msgs: [],
            msg: '',
            message: null,
            items: [],
            item: '',
            dkp: '',
            socket: null
        },
        methods: {
            querySearch(queryString, cb) {
                var users = this.users;
                var results = queryString ? users.filter(this.createFilter(queryString)) : users;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0);
                };
            },
            itemlist: function (event) {
                var _self = this;
                $.ajax({
                    url: '/itemlist',
                    type: "GET",
                    success: function (resp) {
                        _self.items = eval("(" + resp + ")");
                        $(function () {
                            $("#item").autocomplete({
                                source: _self.items
                            });
                        });
                    }
                })
            },
            jointeam: function () {
                var _self = this;
                if (_self.name) {
                    if (_self.team) {
                        _self.send(JSON.stringify({type: 'JOIN', user: _self.name, team: _self.team}));
                        _self.login = false;
                        sessionStorage.setItem("name", _self.name);
                        sessionStorage.setItem("team", _self.team);
                    } else {
                        layer.msg("请先选择团队")
                        window.location.href = '/'
                    }
                } else {
                    layer.msg("请先输入角色名")
                    window.location.href = '/'
                }
            },
            send: function (message) {
                if (message) {
                } else {
                    message = this.msg;
                }
                socket = this.socket;
                if (!window.WebSocket) {
                    return false;
                }
                if (socket.readyState === WebSocket.OPEN) {
                    socket.send(message);
                } else {
                    alert("The socket is not open.");
                }
                return false;
            },
            sendsell: function (message) {
                this.item = $("#item").val();
                this.send(JSON.stringify({type: 'SELL', user: this.name, team: this.team, body: this.item}));
            },
            sendbuy: function (message) {
                if (this.dkp < 5) {
                    layer.msg("出分不能少于5分")
                } else {
                    this.send(JSON.stringify({type: 'BUY', user: this.name, team: this.team, body: this.dkp}));
                }
            },
            end: function (message) {
                this.send(JSON.stringify({type: 'END', user: this.name, team: this.team}));
            }
        }
    });
    var socket;
    if (window.WebSocket) {
        // socket = new WebSocket("ws://182.92.154.239/msg");
        socket = new WebSocket("ws://localhost/msg");
        socket.onmessage = function (event) {
            if (event.data[0] === "[") {
                dkp.users = eval("(" + event.data + ")");
            } else if (event.data[0] === "{") {
                const result = eval("(" + event.data + ")");
                dkp.msgs.push(result)
                if (result.type === "end") {
                    const scores = result.scores;
                    for (let i = 0; i < scores.length; i++) {
                        dkp.msgs.push(scores[i])
                    }
                    let win = JSON.parse(JSON.stringify(result));
                    win.type = 'win';
                    dkp.msgs.push(win)
                    dkp.msgs.push("-----------------------------")
                }
            } else {
                dkp.msgs.push(event.data)
            }
        }
        socket.onopen = function () {
            dkp.jointeam();
        };
    } else {
        alert("Your browser does not support Websockets. (Use Chrome)");
    }
    dkp.socket = socket;
    dkp.name = sessionStorage.getItem("name");
    dkp.team = sessionStorage.getItem("team");
    dkp.admin = sessionStorage.getItem("admin");

    if (dkp.admin){
        dkp.itemlist();
    }
</script>
</body>
</html>
